<template>
	<div class="hello_care clearfix" >
		<div>
			<div class="maycare_title clearfix">
				<span @click="goBack" class="left">返回</span>
				<span class="left">我关注的</span>
				<span class="left add_group" @click="addGroup">添加分组</span>
			</div>
		</div>
		<div @click="goShow" class="mycares clearfix">
			<img src="../../../assets/u1252.png" alt="" class="left"/>
			<div class="left">关注的选手</div>
			<div class="right">12</div>
		</div>		
		<div class="show_contant clearfix">
			<img src="../../../assets/u5020.png" class="left"/>
			<div class="left user">
				<div class="username">汪汪汪</div>
				<div class="level">5段</div>
			</div>	
		</div>
		<div class="right_line "></div>
		<div class="clearfix cloasefollow">
			<div class="username left">汪汪</div>
			<button class="unfollow right" @click="unfollow">取消关注</button>
			<!--<button class="follow right " @click="follow">关注</button>-->
		</div>
		<div class="line"></div>
		<div @click="goShow" class="mycares clearfix">
			<img src="../../../assets/u1252.png" alt="" class="left"/>
			<div class="left">5段</div>
			<div class="right">1</div>
		</div>
		<div @click="goShow" class="mycares clearfix">
			<img src="../../../assets/u1252.png" alt="" class="left"/>
			<div class="left" @click.stop="showItem">棋协</div>
			<div class="right">5</div>
		</div>
	</div>
	
</template>

<script>
	export default{
		methods:{
			goShow:function() {
				alert(1)
			},
			unfollow: function(){
				confirm('确定取消关注吗?').then(action => {
					alert("取消成功！")
				});
			},
			showItem:function() {
				this.$router.push({path:'/groups'})
				return false;
			},
			goBack:function(){
				this.$router.push({path:'/myapp'})
			},
			addGroup:function(){
				
			}
		}
	}
</script>

<style>
	body{
		margin:0px;
		padding: 0px;
	}
.clearfix:after{
	clear: both;
	content:'' ;
	display: block;	
}
.left{
	float:left
}
.right{
	float:right
}
.right_line{
	width: 80%;
	margin-left: 0;
	height: 1px;
	background-color: #CCCCCC;
}
.maycare_title{
	background: #4682B4;
	font-size: 0.4rem;
	color: #fff;
	padding: 20px 0 20px 10px;
	
}
.maycare_title>span {
	width: 33%;
}
.add_group{
	text-align: right;
}
.line{
		height: 1px;
		background-color:#ddd;
		
	}
.mycares{
	padding:20px 10px 10px 20px
}
	.hello_care>div{
		font-size: 0.3rem;
		
	}
	.mycares>img{
		display: block;
		height: 0.3rem;	
		margin-top: 5px;
		margin-right: 20px;	
	}
	.show_contant{
		margin: 20px;
	}
	.show_contant>img{
		display: block;
	}
	.user{
		width: 30%;
		font-size: 0.25rem;
		padding-left: 10px;
	}
	.username{
		font-size: 0.25rem;
	}
	.cloasefollow{
		line-height: 70px;
		padding-left: 20px;
	}
	.unfollow{
		padding: 15px 10px;
		background-color: red;
		border: none;
		color: #fff;
		line-height: 40px;
		font-size: 0.25rem;
	}
</style>